<template>
  <a-card title="邮件反馈" style="width: 100%">
    <a slot="extra" href="javascript:void(0)" @click="showModal('insert',{})">添加</a>
    <a-table :columns="columns"
             :loading="isloading"
             :pagination="false"
             :data-source="noticePage.data"
             rowKey="id">
      <!--      角色是否可用-->
      <span slot="isDelete" slot-scope="del">
      <a-tag
          :color="del === 0 ? 'green':'red'"
      >
        {{ del === 0 ? '接收' : '不接收' }}
      </a-tag>
    </span>
      <!--      操作-->
      <span slot="action" slot-scope="text, record">
      <a-space>
        <a-button type="primary" :disabled="record.roleId === 1" @click="clickHandler('edit',record)" size="small" icon="edit" title="编辑"></a-button>
        <a-button type="danger"
                  size="small"
                  icon="delete"
                  title="删除"
                  @click="clickHandler('remove',record)"></a-button>
      </a-space>
    </span>

      <template slot="footer">
        <a-pagination
            style="text-align: end"
            :page-size-options="['2', '4', '5']"
            :total="noticePage.total"
            show-size-changer
            :page-size="noticePage.pageSize"
            @showSizeChange="onPageSizeChangeHandler"
            @change="onPageChangeHandler"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </template>
    </a-table>
    <!--    编辑模态框-->
    <a-modal
        :title="ModalText"
        :visible="visible"
        :confirm-loading="confirmLoading"
        okText="确认"
        okType="primary"
        cancelText="放弃"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="反馈人邮箱">
          <a-input
              v-decorator="['noticeEmail', {
                initialValue: currentNotice.noticeEmail,
                rules: [{ required: true, message: '请输入邮箱!' },{ type: 'email', message: '邮箱格式有误' }] }]"
          />
        </a-form-item>

        <a-form-item label="是否接收">
          <a-select
              v-decorator="[
              'isDelete',{
                initialValue: currentNotice.isDelete,
                rules: [{ required: true, message: '选择是否接收邮件!' }] },
        ]"
              placeholder="请选择是否可用"
          >
            <a-select-option :value="0">
              接收
            </a-select-option>
            <a-select-option :value="1">
              不接收
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import {DEFAULT_PAGENUM, DEFAULT_PAGESIZE} from "@/constent";
import {getNoticeList, removeNotice, updateNotice} from "@/api/sys";

const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
    align:'center',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '反馈人邮箱',
    dataIndex: 'noticeEmail',
    key: 'noticeEmail',
    align:'center',
    scopedSlots: { customRender: 'noticeEmail' },
  },
  {
    title: '是否接收邮件',
    dataIndex: 'isDelete',
    key: 'isDelete',
    align:'center',
    scopedSlots: { customRender: 'isDelete' },
  },
  {
    title: '操作',
    key: 'action',
    align:'center',
    scopedSlots: { customRender: 'action' },
  },
];
  export default {
    name: "notice",
    data(){
      return {
        ModalText:'',
        isloading: false,
        noticePage:{
          total:20,
          pageNum:DEFAULT_PAGENUM,
          pageSize:DEFAULT_PAGESIZE,
        },
        columns,
        queryParam:{
          pageSize:DEFAULT_PAGESIZE,
          pageNum:DEFAULT_PAGENUM
        },
        // 编辑模态框是否显示
        visible: false,
        // 确认加载中
        confirmLoading: false,
        // 编辑菜单
        currentNotice:{},
        formLayout: 'horizontal',
        form: this.$form.createForm(this, { name: 'coordinated' }),
      }
    },
    watch:{
      // 监视参数变化
      queryParam:{
        immediate:true,
        deep:true,
        handler(){
          this.getNotices();
        }
      }
    },
    methods:{
      // 获取反馈人集合
      async getNotices(){
        this.isloading = true;
        const { pageNum,pageSize } = this.queryParam;
        const result = await getNoticeList(pageNum,pageSize);
        const { code,data,msg } = result;
        if (code === 200){
          this.isloading = false;
          this.noticePage = data;
        } else {
          this.$message.error(msg);
        }
      },
      // 点击处理器
      clickHandler(opera,recode){
        if('edit' === opera){
          this.showModal('edit',recode);
        } else if('remove' === opera){
          this.remove(recode);
        }
      },
      // 删除通知人
      remove(record){
        const _this = this;
        this.$confirm({
          title: '删除反馈人',
          content: '此操作将会删除该通知人,会收不到通知邮件?',
          okText: '确认',
          okType: 'danger',
          cancelText: '放弃',
          onOk() {
            removeNotice(record.id).then(res => {
              const { code,msg } = res;
              if (code === 200){
                _this.$message.success(msg);
                _this.getNotices();
              } else {
                _this.$message.error(msg);
              }
            }).catch(error => {
              console.log(error);
              _this.$message.error("操作异常");
            })
          },
          onCancel() {
            console.log("取消了删除");
          },
        });
      },
      // 展示模态框
      async showModal(type,recode) {
        this.currentNotice = recode;
        if ('edit' === type){
          this.ModalText = '编辑反馈人';
          this.visible = true;
        } else if ('insert' === type){
          this.ModalText = '添加反馈人';
          this.visible = true;
        }
      },
      // 点击了确定
      handleOk(e) {
        const _this = this;
        this.form.validateFields(async (err, values) => {
          if (!err) {
            _this.ModalText = '正在处理中...';
            _this.confirmLoading = true;
            let notice = {...values,id:_this.currentNotice.id};
            const result = await updateNotice(notice);
            const {code,msg} = result;
            if (code === 200){
              _this.$message.success(msg);
              _this.getNotices();
            } else {
              _this.$message.error(msg);
            }
            setTimeout(() => {
              _this.visible = false;
              _this.confirmLoading = false;
              _this.currentNotice = {};
              _this.form.resetFields();
            }, 1000);
          }
        });
      },
      // 点击了取消
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      /**
       * 每页显示条数改变回调
       * @param current
       * @param pageSize
       */
      onPageSizeChangeHandler(current, pageSize) {
        this.queryParam.pageSize = pageSize;
        this.queryParam.pageNum = DEFAULT_PAGENUM;
      },

      /**
       * 当前页改变回调
       * @param current
       * @param pageSize
       */
      onPageChangeHandler(current){
        this.queryParam.pageNum = current;
      }
    }
  }
</script>

<style scoped>

</style>
